<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>

    <!-- Icon-->
    <link rel="icon" type="image/x-icon" href="shuttle.png">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- Javascript -->
    <script src="script.js" defer></script>

</head>
<body>
  <!------------------------------------------------ Countdown Timer ------------------------------------------------------>
    <h1 class="wave">&#128640</h1>
    <!-- Big Heading -->
    <h1>Until JWST Launch</h1>
    <!-- Countdown Timer -->
        <div class="countdown-container">
            <!-- Days -->
            <div class="center days-container">
                <p class="bigtext" id="days">0</p>                
                <span>days</span>
            </div>

            <!-- Hours -->
            <div class="center hours-container">
                <p class="bigtext" id="hours">0</p>                
                <span>hours</span>
            </div>

            <!-- Minutes -->
            <div class="center minutes-container">
                <p class="bigtext" id="minutes">0</p>                
                <span>mins</span>
            </div>
            
            <!-- Seconds -->
            <div class="center seconds-container">
                <p class="bigtext" id="seconds">0</p>                
                <span>secs</span>
            </div>
        </div>

    <!------------------------------------------------- Three JS Space Background ---------------------------------------->
    <script src="three.min.js"></script>
    <script>
    let scene, camera, renderer, stars, starGeo;

    function init() {

      scene = new THREE.Scene();

      camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 1;
      camera.rotation.x = Math.PI/2;

      renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      starGeo = new THREE.Geometry();
      for(let i=0;i<6000;i++) {
        star = new THREE.Vector3(
          Math.random() * 600 - 300,
          Math.random() * 600 - 300,
          Math.random() * 600 - 300
        );
        star.velocity = 0;
        star.acceleration = 0.02;
        starGeo.vertices.push(star);
      }

      let sprite = new THREE.TextureLoader().load( 'star.png' );
      let starMaterial = new THREE.PointsMaterial({
        color: 0xaaaaaa,
        size: 0.7,
        map: sprite
      });

      stars = new THREE.Points(starGeo,starMaterial);
      scene.add(stars);

      window.addEventListener("resize", onWindowResize, false);

      animate(); 
    }
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      }
    function animate() {
      starGeo.vertices.forEach(p => {
        p.velocity += p.acceleration
        p.y -= p.velocity;
        
        if (p.y < -200) {
          p.y = 200;
          p.velocity = 0;
        }
      });
      starGeo.verticesNeedUpdate = true;
      stars.rotation.y +=0.002;
    
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    }
    init();
    </script>
</body>
</html>